(
/* 获取页面加载的图片 */
function(){
	var albumArr = JSON.parse(localStorage.getItem('albumArr')) || [];
	function albumIndex(){
	    var localurl = document.location.href;   
		var i = parseInt(localurl.substring(localurl.indexOf('?')+1))	     
		return i;
	}
	var nowIndex = albumIndex()
	var imagesgArr = albumArr[nowIndex].imgterm;
	var editVal = $('.edit-val');
	// var albumDiscribe = albumIndex().discribe;
	// // console.log(imagesgArr,albumDiscribe);
	// if(albumDiscribe == ''){
	
	// }
	var resetPage = function resetPage(){
		$.each(imagesgArr,function(i,v){
			if(i == $(imageBox[i]).attr('index')-1){
				$(imageBox[i]).html('');
			}
		})
	};
	
	
	var imageBox = $('.img-frame')
	// 向容器里面添加拿到的图片
	var showPage = function showPage(arr){
	for(var i = 0; i < arr.length; i ++){
		if(arr.length > 11){
			if(i == $(imageBox[i]).attr('index')-1){
				$(imageBox[j]).removeClass('disclick');
				$(imageBox[i]).append(
				'<img src="'+arr[i]+'" >'
				)
			}
		}else{
			if(i == $(imageBox[i]).attr('index')-1){
				$(imageBox[j]).removeClass('disclick');
				$(imageBox[i]).append(
				'<img src="'+arr[i]+'" >'
				);
				for(var j = arr.length; j < 12; j ++){
					if(j == $(imageBox[j]).attr('index')-1){
						$(imageBox[j]).addClass('disclick');
					}
				}	
			}		
		}
	}
	if(albumArr[nowIndex].discribe == ''){
		editVal.text('你还没有对相册添加任何描述...')
	}else{
		editVal.text(albumArr[nowIndex].discribe)
	}
	}
	showPage(imagesgArr);
	// 添加照片
	var addPic = $('.add-picture');
	addPic.on('click',function(){		
		var picModelBox = $('.pic-modelBox');
		var picInsideTips = $('.pic-insideTips');
		var picInsideBox = $('.insideBox');	
		var closeAdd = $('.add-close');
		var controlNo = $('.control-no');
		var controlYes = $('.control-yes');
		var picIkonw = $('.pic-Ikonw')
		var f1 = $('#f1');
		var f2 = $('#f2');
		var files;
		var imgName = $('.img-name');
		var imgSet = [];
		var imgChose = false;
		f2.unbind('click').on('click', function() {
			f1.trigger('click');
		});
		f1.unbind('click').on('change', function() {
			var Name = '';
			files = event.target.files;
			$.each(files, function(i, v) {
				Name = Name + files[i].name + ',';
				imgName.text(Name);
			})
		});
		var hidePictureBox = function hidePictureBox(){
			picModelBox.hide();
		}	
		imgName.bind("DOMNodeInserted",function(){
			return imgChose = true;
		})
		picModelBox.show();
		picInsideBox.show();
		controlYes.unbind('click').on('click',function(){
			if(!imgChose){
				picInsideBox.hide();
				picInsideTips.show();
			}else{
				createImg();
				hidePictureBox();
				imgName.text('你还没有选择任何图片..');
			}
		});
		closeAdd.on('click',hidePictureBox);
		controlNo.on('click',hidePictureBox);
		picIkonw.on('click',function(){
			picInsideBox.show();
			picInsideTips.hide();
			
		});
		var createImg = function createImg(){
			/* 添加照片 */ 
				// console.log(selectLVal.text(),selectRVal.text(),picDis.val());
				$.each(files, function(i) {
					var f1Reader = new FileReader();
					f1Reader.readAsDataURL(files[i]);
					f1Reader.onloadend =function() {	
						src = event.target.result;
						imgSet.push(src);
						if(imgSet.length == files.length){
								addInAlbum(imgSet);
						}
					}	
				})
		}
	});	
	var addInAlbum = function addInAlbum(arr){
		resetPage();
		$.each(arr,function(i,v){
			albumArr[nowIndex].imgterm.unshift(arr[i]);
			if(i == arr.length - 1){
				localStorage.setItem('albumArr',JSON.stringify(albumArr));
			}
		})

		showPage(imagesgArr)
			// albumArr[nowIndex].imgterm.unshift('img');
			// localStorage.setItem('albumArr',JSON.stringify(albumArr));
	}
	// 删除相册
	var deleteModelBox = $('.delete-modelBox');
	var deleteInsideTips = $('.delete-insideTips');
	var deleteInsideBox = $('.deleteInside');
	var deletePic = $('.delete-pic');
	var deleteNo = $('.delete-no');
	var deleteYes = $('.delete-yes');
	var deleteIkonw = $('.delete-Ikonw')
	deletePic.on('click',function(){
		deleteModelBox.show();
		deleteInsideBox.show();
	})
	deleteNo.on('click',function(){
		deleteModelBox.hide();
	})
	deleteYes.on('click',function(){
		if(albumArr[nowIndex].imgterm.length == 0){
			albumArr.splice(nowIndex, 1);
			localStorage.setItem('albumArr',JSON.stringify(albumArr));
			location.href ='../pages/pictureWall.html';
		}else{
			deleteInsideBox.hide();
			deleteInsideTips.show();
		}
	})
	deleteIkonw.on('click',function(){
		deleteModelBox.hide();
		deleteInsideTips.hide();
		
	})
	// 编辑相册描述
	var disModelBox = $('.dis-modelBox');
	var disInsideTips = $('.dis-insideTips');
	var discribeInside = $('.discribeInside');
	var edtAlbum = $('.album-edt');
	var closeEdt = $('.edt-close');
	var edtYes = $('.edt-yes');
	var edtNo = $('.edt-no');
	var disIkonw = $('.dis-Ikonw')
	var discribeEdt = $('.discribe-edt')
	edtAlbum.on('click',function(){
		disModelBox.show();
		discribeInside.show();
		
	});
	disIkonw.on('click',function(){
		disInsideTips.hide();
		discribeInside.show();
	})
	closeEdt.on('click',function(){
		disModelBox.hide();
	});
	edtNo.on('click',function(){
		disModelBox.hide();
	});
	edtYes.on('click',function(){
		// albumArr[nowIndex].discribe
		if(discribeEdt.val() == ''){
			discribeInside.hide();
			disInsideTips.show();
		}else{
			editVal.text(discribeEdt.val());
			disModelBox.hide();
			albumArr[nowIndex].discribe = discribeEdt.val();
			localStorage.setItem('albumArr',JSON.stringify(albumArr));
		}
		
	});
	$('.image-box').on('click','.img-frame', function () {
	    var that = $(this);
		var images = that.parents('.image-box').find('.img-frame');
	    var imagesArr = [];
	    images.each( function (i, image) {
			if( $(image).children('img').attr('src')!= undefined){
				imagesArr.push($(image).children('img').attr('src'));
			}
	    });
	   pictureShow({
	        images: imagesArr, //需要查看的图片，数据类型为数组
	        initImageIndex: that.attr('index') - 1, //初始查看第几张图片，默认1
	    });
	});
	// 创建一个模态框,并将当前图片完整的展示在模态框内
	var pictureShow = function (obj) {
	    var imgModel =    '<div id="pictureViewer">' +
								'<div class="content">' +
									'<div class="menu-bar">' +							
										'<div class="close-view right" ><span class="iconfont span-prev">&#xee7b;</span></div>' +
										'<div class="clear-flex"></div>' +
									'</div>' +
									'<div class="handel-prev left" ><span class="iconfont span-prev">&#xe6b5;</span></div>' +
									'<div class="picture-content">' +
										'<img class="cover" src="">' +
									'</div>' +
									'<div class="handel-next right" ><span class="iconfont span-prev">&#xe68d;</span></div>' +
									'<div class="counter">' +
										'<span class="iconfont span-prev">&#xe622;</span>'+
									'</div>' +
								'</div>'+
							'</div>';
	                              
	    //init param
	    var imgArr = obj.images;
		var albumBotoom = $('.album-botoom')
	    var nowImageIndex = obj.initImageIndex;
	    if (!imgArr || !imgArr.length) return false;
	    //init dom
	    if (!$('#pictureViewer').length) albumBotoom.append(imgModel);
	    //definition variable
	    var BODY = $('body');
	    var pictureViewer = $('#pictureViewer');
	    var pictureViewerContent = pictureViewer.children('.content');
		// img
	    var cover = pictureViewer.find('.picture-content .cover');	
	    var closeBtn = pictureViewer.find('.close-view');
	    var prevBtn = pictureViewer.find('.handel-prev');
	    var nextBtn = pictureViewer.find('.handel-next');
		// 第几个
	    var counter = pictureViewer.find('.counter');
		// 总数
	    // var total = pictureViewer.find('.counter .total');
	    var defaultViewWidth = pictureViewerContent.css('width');
	    var defaultViewHeight = pictureViewerContent.css('height');
	    var imagesTotal = imgArr.length;
	    //view is show
	    var viewIsShow = function viewIsShow() {
	        return pictureViewer.is(':visible');
	    };
	    //lock body
	    var lockBody = function lockBody() {
	        return BODY.css('overflow', 'hidden');
	    };
	    //unlock body
	    var unlockBody = function unlockBody() {
	        return BODY.css('overflow', 'auto');
	    };
	    //show view
	    var showView = function showView() {
	        pictureViewer.show();
	        lockBody();
	    };
	    //hide view
	    var hideView = function hideView() {
	        pictureViewer.hide();
	        pictureViewerContent.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
	        unlockBody();
	    };
	    //change image
	    var changeImage = function changeImage(index) {
	        cover.attr('src', imgArr[index]);
	        nowImageIndex = index;
	        // changeImageNum();
	    };
	    //change image num
	    // var changeImageNum = function changeImageNum() {
	    //     num.text(nowImageIndex + 1);
	    // };
	    //to prev image
	    var toPrevImage = function toPrevImage() {
	        return changeImage(nowImageIndex === 0 ? imagesTotal - 1 : nowImageIndex - 1);
	    };
	    //to next image
	    var toNextImage = function toNextImage() {
	        return changeImage(nowImageIndex === imagesTotal - 1 ? 0 : nowImageIndex + 1);
	    };
	    //init state
	    showView();
	    changeImage(nowImageIndex);
	    // total.text(imagesTotal);
	    //handle close click
	    closeBtn.on('click', hideView);
	    $(document).on('keydown', function (event) {
	        if (!viewIsShow()) return;
	        var keyCode = event.keyCode;
			// Esc
	        if (keyCode === 27) hideView();
			// 左
	        if (keyCode === 37) toPrevImage();
			// 右
	        if (keyCode === 39) toNextImage();
	    });
	    //handel prev click
	    prevBtn.on('click', toPrevImage);
	    //handel next click
	    nextBtn.on('click', toNextImage);
		albumBotoom.unbind('click').on('click','.counter',function(){
			resetPage();
			hideView();	
			albumArr[nowIndex].imgterm.splice(nowImageIndex, 1);
			showPage(imagesgArr);	
			localStorage.setItem('albumArr',JSON.stringify(albumArr));
		})
	};
	// 换一批JS代码
	var showIndex = 0;
	var anotherBatch = $('.another-batch');
	anotherBatch.on('click',function(){
		showIndex ++;
		if(showIndex > parseInt((imagesgArr.length - 1)/12)){
			showIndex = 0
		}
		anotherPage(imagesgArr,showIndex);
	})
	var anotherPage = function anotherPage(arr,num){
		var haveImg = imagesgArr.length;
		resetPage();
		for(var i = 0; i < haveImg; i ++){
			if(i + num*12 < haveImg ){
				$(imageBox[i]).removeClass('disclick');
				if(i == $(imageBox[i]).attr('index')-1){
					$(imageBox[i]).append(
					'<img src="'+arr[i + num*12]+'" >'
					)
				}
			}else{
				for(var j = haveImg; j < (num+1)*12; j ++){
					if(j%12 == $(imageBox[j%12]).attr('index')-1){
						$(imageBox[j%12]).addClass('disclick');
					}
				}
			}
			
		}
	if(albumArr[nowIndex].discribe == ''){
		editVal.text('你还没有对相册添加任何描述...')
	}else{
		editVal.text(albumArr[nowIndex].discribe)
	}
	}
})();